<template>
  <el-container style="height:100vh">
    <el-aside width="400px">
      <div class="map">
        <l-map
          :zoom="zoom"
          :center="center"
          :options="options"
          @update:center="centerUpdate"
          @update:zoom="zoomUpdate"
        >
          <l-tile-layer v-for="(item,index) in titleLayers" :key="index" :url="item" />
          <l-marker
            :lat-lng="center"
            :icon="getIcon(deviceSingle)"
            :title="deviceSingle.name"
          />
          <l-polyline
            :lat-lngs="latlngs"
          />
          <l-circle
            :key="`circle`"
            :lat-lng="circle.center"
            :radius="circle.radius"
            :color="circle.color"
            :fill-color="circle.color"
            :opacity="0"
          />
        </l-map>
      </div>
      <div class="action-wrapper">
        <div class="action-title">{{ deviceSingle.name || '' }} {{ deviceSingle.serialno || '' }}</div>
        <div class="exam-list">
          <el-button
            v-for="(item,index) in urls"
            :key="index"
            :plain="index !== currentIndex"
            type="primary"
            class="exam-item"
            @click="changeComponent(item,index)"
          >{{ item.name || '' }}</el-button>
        </div>
      </div>
    </el-aside>
    <el-main>
      <manual-component v-if="currentIndex === 0" :device="deviceSingle" />
      <area-component v-if="currentIndex === 1" ref="area" :serialno="serialno" />
      <auto-component v-if="currentIndex === 2" ref="auto" :serialno="serialno" />
    </el-main>
    <mqtt-single :topic="topic" :device="deviceSingle" />
    <el-button type="primary" circle class="fresh-btn" icon="el-icon-refresh" @click="refresh" />
    <Legend :legend-show="legendShow" />
  </el-container>
</template>

<script>
import AreaComponent from './components/area'
import ManualComponent from './components/manual'
import AutoComponent from './components/auto'
import MqttSingle from '@/components/MqttSingle'
import Legend from './components/legend'
import { getOne } from '@/api/device'
import { mapGetters } from 'vuex'
import map from '@/config/map'
import { getDeviceImage } from '@/utils/device'
import * as turf from '@turf/turf'
export default {
  components: {
    AreaComponent,
    ManualComponent,
    AutoComponent,
    MqttSingle,
    Legend
  },
  inject: ['reload'],
  data() {
    return {
      circle: {},
      latlngs: [],
      legendShow: false,
      optionsMarker: {
        permanent: true,
        interactive: false,
        direction: 'bottom',
        offset: [0, 8],
        className: 'anim-tooltip'
      },
      zoom: map.zoom,
      options: map.options,
      center: map.center,
      titleLayers: map.mapTypes[map.initType],
      typeIndex: 0,
      currentIndex: 0,
      serialno: '',
      topic: '',
      urls: [
        { name: '手动灌溉', components: 'manual' },
        { name: '分区管理', components: 'area' },
        { name: '自动灌溉', components: 'auto' }
      ]
    }
  },
  computed: {
    ...mapGetters(['deviceSingle']),
    currentItem() {
      return this.urls[this.currentIndex]
    }
  },
  watch: {
    deviceSingle: {
      handler(newVal) {
        if (newVal.serialno) {
          this.centerUpdate([newVal.lat, newVal.lng])
          this.getLatlngs(this.deviceSingle)
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.serialno = this.$route.query.serialno
    this.getOne(this.serialno)
  },
  methods: {
    refresh() {
      switch (this.currentIndex) {
        case 0:
          this.reload()
          break
        case 1:
          this.$refs.area.refresh()
          break
        case 2:
          this.$refs.auto.refresh()
          break
      }
    },
    async getOne(serialno) {
      const { data } = await getOne(serialno)
      const rtu_serialno = data.rtu_serialno || data.serialno
      this.topic = `D/${data.scada_id}/RSP/+/${rtu_serialno}`
      document.title = data.name
      this.$store.commit('device/SET_DEVICE_SINGLE', data)
      this.circle = {
        serialno: data.serialno,
        radius: data.settings.radius,
        center: [+data.lat, +data.lng],
        color: 'rgba(248, 9, 9, 0.6)'
      }
      this.la
    },
    getLatlngs(item) {
      const startPos = [+item.lng, +item.lat]
      const radius = (+item.settings.radius) / 1000
      let angle = 0
      if (item.states.Angle !== undefined) {
        angle = +item.states.Angle
      }
      if (item.states.REG_HMI_GPS !== undefined) {
        angle = +item.states.REG_HMI_GPS
      }
      const endPos = this.getPoint(startPos, radius, angle)

      this.latlngs = [[startPos[1], startPos[0]], [endPos[1], endPos[0]]]
    },
    getPoint(startPos, distance, bearing) {
      const point = turf.point(startPos)
      const destination = turf.destination(point, distance, bearing)

      return destination.geometry.coordinates
    },
    changeComponent(item, index) {
      this.currentIndex = index
    },
    zoomUpdate(zoom) {
      this.zoom = zoom
    },
    centerUpdate(center) {
      this.center = center
    },
    getIcon(item) {
      if (item.serialno) {
        // eslint-disable-next-line no-undef
        return L.icon({
          iconSize: [36, 36],
          iconUrl: getDeviceImage(item)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fresh-btn{
  position:fixed;bottom:24px;right:24px;width:48px;height:48px;font-size:18px;
}
  .el-aside {
    background-color: #292E30;
    color: #fff;
    text-align: center;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    padding:12px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .map{
    color:#fff;
    background:#999;
    width:100%;
    height:258px;
    line-height:258px;
  }
  .action-wrapper{
    margin:12px;
  }
  .action-title{
    margin:12px;
    line-height:36px;
  }
  .exam-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .exam-item {
      flex: 1;
      text-align: center;
      margin: 0 12px 12px 0;
      box-sizing: border-box;

      width: calc((100% - 12px) / 2);   // 我这里一行显示4个 所以是/4  一行显示几个就除以几
      // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 12px) / 2);
      max-width: calc((100% - 12px) / 2);

      &:nth-child(even) {
        margin-right: 0;
      }
    }
  }
</style>
